import React, { useState, useEffect } from 'react'
import ReactDom from 'react-dom'
import "./app.less"
import './registerServiceWorker'

function App() {


    const [list, setList] = useState([]);


    useEffect(() => {
        fetch('http://127.0.0.1:3030/api/food/getFoodList', {
            method: 'get',
            headers: {
                "token": '123123'
            }
        }).then((response) => {
            return response.json()
        }).then((result) => {
            if (result.code == '0') {
                setList(result.data || []);
            }
        })
    }, []);

    return (
        <>
            <div className="app-page-title">hello pwa basic</div>
            <div className="list-container">
                {
                    list.map((item, index) => {
                        return (
                            <div className="list-item" key={index}>
                                <div className="list-item-content">
                                    <img src={item.albums[0]} className="item-img" />
                                    <div className="item-bottom">
                                        <p className="item-title">{item.title}</p>
                                    </div>
                                </div>
                            </div>
                        )
                    })
                }

            </div>
        </>
    )
}

ReactDom.render(<App />, document.getElementById("app"))
